import React from 'react';
import { Form, Input, Button } from 'antd'
import service from '../../api/index';
import { useNavigate } from 'react-router-dom'
import { useDispatch } from 'react-redux'; 
import "./Login.scss"

interface Props { }

function Login(props: Props) {
    
    var dispatch =useDispatch()

    const navigate = useNavigate();
    //表单验证通过时, 执行
    const onFinish = async (values: any) => {
        console.log('登录表单:', values);
        //发起登陆请求
        var res = await service.admin.admin_login(values)
        if (res.data.code == 200) {
            //保存用户信息
            console.log(res.data.data);
            navigate("/index");
            dispatch({type:'SAVE_USERINFO',payload:res.data.data})
            // localStorage.setItem('token',res.data.data.token)
        }
    };
    return (
        <div className='form'>
            <div className='herader'>后台管理系统</div>
            <Form
                className='formm'
                name="basic"
                onFinish={onFinish}
            >
                <Form.Item
                    name="adminname"
                    rules={[{ required: true, message: '请输入正确的账号!' }]}
                >
                    <Input />
                </Form.Item>

                <Form.Item
                    name="password"
                    rules={[{ required: true, message: '请输入正确的密码!' }]}
                >
                    <Input.Password />
                </Form.Item>

                <Form.Item>
                    <Button type="primary" htmlType="submit">
                        提交
                    </Button>
                </Form.Item>
            </Form>
        </div>
    );
}

export default Login;